<template>
  <view class="content">
    <view class="lunbo">
      <u-swiper :list="list1" height="300" />
    </view>
    <!-- 商品标题 -->
    <view class="info">
      <!-- <view class="title">{{info.brankname_text + info.btypename_text + info.model}}</view> -->
      <!-- 价格 -->
      <!-- <h3>{{ item.price }}</h3> -->

      <!-- 商品信息区域 -->
      <view class="goods-info-box">
        <!-- 信息主体区域 -->
        <view class="goods-info-body">
          <!-- 商品名称 -->
          <view class="goods-name">{{
            info.brankname_text + info.btypename_text + info.code
          }}</view>
          <!-- 收藏 -->
          <view class="favi">
            <u-icon
              v-if="info.check"
              name="star-fill"
              color="#f60"
              size="24"
              @click="cancelcollection(info.id)"
            ></u-icon>
            <u-icon
              v-else
              @click="procollection(info.id)"
              name="star"
              size="24"
            ></u-icon>

            <text>收藏</text>
          </view>
        </view>

        <!-- 商品价格 -->
        <view class="price">￥{{ info.price }}</view>
        <!-- 运费 -->
        <view class="yf">快递：免运费</view>
      </view>

      <view class="joinlevel">
        <view class="left"> 加入会员，享受会员价 <span>￥21300</span> </view>
        <view class="right">了解更多 <span>></span></view>
      </view>
      <view class="sale"> 已售<span>3</span>件 </view>
    </view>

    <!-- 参数 -->
    <view class="params">
      <u-cell-group>
        <u-cell
          :border="false"
          :isLink="true"
          :titleStyle="titleStyle"
          @click="show = true"
        >
          <view slot="title" class="u-slot-title">
            <text style="font-size: 14px; color: #989795"> 选择</text>

            <span style="padding-left: 10px; font-size: 13px">规格:默认</span>
          </view>
        </u-cell>
        <u-cell :border="false" :isLink="true" :titleStyle="titleStyle">
          <view slot="title" class="u-slot-title">
            <text style="font-size: 14px; color: #989795"> 保障</text>

            <span style="padding-left: 10px; font-size: 13px"
              >官方正品 . 七天无理 . 运费险</span
            >
          </view>
        </u-cell>
        <u-cell
          :border="false"
          :isLink="true"
          :titleStyle="titleStyle"
          @click="show1 = true"
        >
          <view slot="title" class="u-slot-title">
            <text style="font-size: 14px; color: #989795"> 参数</text>

            <span style="padding-left: 10px; font-size: 13px"
              >品牌 型号 系列 款式 颜色 材质 属性
            </span>
          </view>
        </u-cell>
      </u-cell-group>
    </view>

    <!-- 评价 -->
    <view class="comment">
      <span>暂无评价</span>
    </view>

    <!-- 商品详情 -->
    <view class="proinfo">
      <u-divider text="图文详情"></u-divider>
    </view>

    <!-- 商品详情图 -->
    <view class="infothumb" v-for="item in info.thumbs_text" :key="item.id">
      <view class="thumbitem">
        <u-image
          :showLoading="true"
          :src="item"
          :lazy-load="true"
          width="350px"
          height="350px"
          @click="click"
        ></u-image>
      </view>
    </view>

    <view class="submit">
      <view class="Box">
        <view class="left">
          <view class="item">
            <u-icon
              name="server-fill"
              :size="30"
              :color="$u.color['contentColor']"
            ></u-icon>
            <view class="text u-line-1">客服</view>
          </view>
          <view class="item">
            <u-icon
              name="home"
              :size="30"
              :color="$u.color['contentColor']"
            ></u-icon>
            <view class="text u-line-1">店铺</view>
          </view>
          <view class="item boxcar car" @click="tocar">
            <view class="badge">
              <u-badge :type="'error'" max="99" :value="value"></u-badge>
            </view>
            <u-icon
              name="shopping-cart"
              :size="30"
              :color="$u.color['contentColor']"
            ></u-icon>
            <view class="text u-line-1">购物车</view>
          </view>
        </view>
        <view class="right">
          <view class="cart btn u-line-1" @click="addproduct(info.soure)"
            >加入购物车</view
          >
          <view class="buy btn u-line-1" @click="buyMember">立即购买</view>
        </view>
      </view>
    </view>

    <!-- 弹出层 规格-->
    <view class="tanchu">
      <u-popup
        :show="show"
        :round="10"
        mode="bottom"
        @close="close"
        @open="open"
        closeIconPos="top-right"
      >
        <view class="addgoodscard">
          <view class="top">
            <view class="item">
              <view class="thumb">
                <u-image
                  :showLoading="true"
                  :lazy-load="true"
                  :src="'https://cdn.uviewui.com/uview/album/1.jpg'"
                  width="50px"
                  height="50px"
                ></u-image>
              </view>
              <view class="stockandpeice">
                <view class="price">￥434434</view>
                <view class="stock">
                  <span>库存:</span>
                  <span>10</span>
                </view>
              </view>
            </view>
          </view>
          <view class="guige">
            <view class="guigetitle">规格</view>
            <view class="list">
              <view
                v-for="(tab, index) in tabnamelist"
                :key="index"
                class="item"
                :class="{ selected: index === selectedTab }"
                @click="selectTab(index)"
              >
                {{ tab.name }}
              </view>
            </view>
          </view>
          <view class="num">
            <view class="left">数量</view>
            <view class="right">
              <u-number-box v-model="sum"></u-number-box>
            </view>
          </view>
          <view class="sumbbtn">
            <view class="car" @click="card">
              <u-button text="加入购物车" type="warning "></u-button>
            </view>
            <view class="buy">
              <u-button
                text="立即购买"
                color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
              ></u-button>
            </view>
          </view>
        </view>
      </u-popup>
    </view>

    <!-- 参数 -->

    <view class="canshu">
      <u-popup :show="show1" @close="close1" @open="open1">
        <view v-if="info.soure == 'product'">
          <view class="box">
            <span class="branktitle">品牌</span>
            <span class="brankvalue">{{ info.brankname_text }}</span>
          </view>
          <view class="box">
            <span class="branktitle">系列</span>
            <span class="brankvalue">{{ info.btypename_text }}</span>
          </view>
          <view class="box">
            <span class="branktitle">型号</span>
            <span class="brankvalue">{{ info.code }}</span>
          </view>

          <view class="box">
            <span class="branktitle">机芯</span>
            <span class="brankvalue">{{ info.jxtype }}</span>
          </view>
          <view class="box">
            <span class="branktitle">表带材质</span>
            <span class="brankvalue">{{ info.bdcz }}</span>
          </view>
          <view class="box">
            <span class="branktitle">表壳直径</span>
            <span class="brankvalue">{{ info.bkzj }}</span>
          </view>
          <view class="box">
            <span class="branktitle">表壳材质</span>
            <span class="brankvalue">{{ info.bkcz }}</span>
          </view>
          <view class="box">
            <span class="branktitle">表壳厚度</span>
            <span class="brankvalue">{{ info.bkhd }}</span>
          </view>
          <view class="box">
            <span class="branktitle">防水深度</span>
            <span class="brankvalue">{{ info.fssd }}</span>
          </view>
        </view>
        <view v-else>
          <view class="box">
            <span class="branktitle">品牌</span>
            <span class="brankvalue">{{ info.brankname_text }}</span>
          </view>
          <view class="box">
            <span class="branktitle">系列</span>
            <span class="brankvalue">{{ info.btypename_text }}</span>
          </view>
          <view class="box">
            <span class="branktitle">商品名称</span>
            <span class="brankvalue">{{ info.name }}</span>
          </view>

          <view class="box">
            <span class="branktitle">颜色</span>
            <span class="brankvalue">{{ info.color }}</span>
          </view>
          <view class="box">
            <span class="branktitle">商品成分</span>
            <span class="brankvalue">{{ info.ingredients }}</span>
          </view>
          <view class="box">
            <span class="branktitle">商品属性</span>
            <span class="brankvalue">{{ info.prop }}</span>
          </view>
          <view class="box">
            <span class="branktitle">商品简介</span>
            <span class="brankvalue">{{ info.content }}</span>
          </view>
        </view>
      </u-popup>
    </view>

    <u-toast ref="notice"></u-toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      src: "https://cdn.uviewui.com/uview/album/1.jpg",

      list1: [],
      value: "",
      sum: 0,
      businessinfo: {},
      tabnamelist: [
        {
          name: "默认",
        },
        {
          name: "皮质",
        },
        {
          name: "系列",
        },
        {
          name: "机芯",
        },
        {
          name: "表壳",
        },
      ],
      soure: "",
      addcartflag: false,
      show: false,
      show1: false,
      proid: 0,
      selectedTab: 0,

      info: [],
    };
  },
  onLoad(option) {
    this.businessinfo = this.$u.business.check();
    this.proid = option.proid ? option.proid : 0;
    this.proinfo();
    this.getbadge();
  },
  methods: {
    // 去到购物车
    tocar() {
      uni.$u.route({
        url: "pagesC/order/car",
      });
    },
    // 立即购买
    buyMember() {
      let that = this;
      if (this.soure == "product") {
        uni.request({
          url: uni.getStorageSync("URL") + "home/order/order/buywatch",
          method: "POST",
          data: {
            proid: this.proid,
            busid: this.businessinfo.id,
            price: this.info.price,
            stoid: this.info.stoid,
          },

          header: {
            "X-Requested-With": "XMLHttpRequest",
          },
          dataType: "json",
          success: (res) => {
            let data = res.data.data;
            let appId = data.appId;
            let timeStamp = data.timeStamp;
            let nonceStr = data.nonceStr;
            let packageX = data.package;
            let signType = data.signType;
            let paySign = data.paySign;
            let orderid = data.orderid;
            let busid = this.businessinfo.id;
            //调用支付接口
            uni.requestPayment({
              //下面参数为必传
              provider: "wxpay", //支付类型
              appId: appId, //小程序Appid
              timeStamp: timeStamp, //创建订单时间戳
              nonceStr: nonceStr,
              package: packageX, // 订单包
              signType: signType, // 加密方式统一'MD5'
              paySign: paySign, // 后台支付签名返回
              success(res) {
                if (res.errMsg === "requestPayment:ok") {
                  uni.request({
                    url:
                      uni.getStorageSync("URL") +
                      "home/order/order/changeOrderStatus",
                    method: "POST",
                    data: {
                      orderid: orderid,
                      busid: busid,
                    },
                    header: {
                      "X-Requested-With": "XMLHttpRequest",
                    },
                    dataType: "json",
                    success: (res) => {
                      that.$refs.notice.show({
                        type: "success",
                        message: "购买成功",
                        duration: 1200,
                        complete: () => {
                          // 	uni.reLaunch({
                          // 	url: '/pagesB/vipGrade/vipGrade'
                          // })
                        },
                      });
                    },
                  });
                }
              },
              fail(err) {
                console.log(err);
                that.$refs.notice.show({
                  type: "danger",
                  message: "购买失败",
                  duration: 1200,
                });
              },
            });
          },
          fail: (res) => {
            uni.$u.toast("下单失败");
          },
        });
      } else {
        uni.request({
          url: uni.getStorageSync("URL") + "home/order/order/buybags",
          method: "POST",
          data: {
            hireid: this.proid,
            busid: this.businessinfo.id,
            price: this.info.price,
            stoid: this.info.stoid,
          },

          header: {
            "X-Requested-With": "XMLHttpRequest",
          },
          dataType: "json",
          success: (res) => {
            let data = res.data.data;
            let appId = data.appId;
            let timeStamp = data.timeStamp;
            let nonceStr = data.nonceStr;
            let packageX = data.package;
            let signType = data.signType;
            let paySign = data.paySign;
            let orderid = data.orderid;
            let busid = this.businessinfo.id;
            //调用支付接口
            uni.requestPayment({
              //下面参数为必传
              provider: "wxpay", //支付类型
              appId: appId, //小程序Appid
              timeStamp: timeStamp, //创建订单时间戳
              nonceStr: nonceStr,
              package: packageX, // 订单包
              signType: signType, // 加密方式统一'MD5'
              paySign: paySign, // 后台支付签名返回
              success(res) {
                if (res.errMsg === "requestPayment:ok") {
                  uni.request({
                    url:
                      uni.getStorageSync("URL") +
                      "home/order/order/changeOrderStatus",
                    method: "POST",
                    data: {
                      orderid: orderid,
                      busid: busid,
                    },
                    header: {
                      "X-Requested-With": "XMLHttpRequest",
                    },
                    dataType: "json",
                    success: (res) => {
                      that.$refs.notice.show({
                        type: "success",
                        message: "购买成功",
                        duration: 1200,
                        complete: () => {
                          // 	uni.reLaunch({
                          // 	url: '/pagesB/vipGrade/vipGrade'
                          // })
                        },
                      });
                    },
                  });
                }
              },
              fail(err) {
                console.log(err);
                that.$refs.notice.show({
                  type: "danger",
                  message: "购买失败",
                  duration: 1200,
                });
              },
            });
          },
          fail: (res) => {
            uni.$u.toast("下单失败");
          },
        });
      }
    },

    // 购物车数量
    async getbadge() {
      let data = {
        busid: this.businessinfo.id,
      };

      let result = await this.$u.api.order.badge(data);
      if (result.code) {
        this.value = result.data;
      }
    },

    // 商品收藏
    async procollection(e) {
      let data = {
        busid: this.businessinfo.id,
        hireid: e,
      };

      let result = await this.$u.api.product.collection(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 1388,
          complete: () => {
            console.log(123);

            this.proinfo();
          },
        });
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
      }
    },
    // 取消收藏
    async cancelcollection(e) {
      let data = {
        busid: this.businessinfo.id,
        hireid: e,
      };

      let result = await this.$u.api.product.cancelcollection(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 1388,
          complete: () => {
            console.log(321);
            this.proinfo();
          },
        });
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
      }
    },
    // 外层的购买
    buy() {
      this.show = false;
    },
    // 外层的购物车
    card() {
      this.show = false;
    },
    // 弹出层外的购物车
    addproduct(e) {
      this.show = false;
      // this.value = 1
      this.addcart(e);
      this.addcartflag = true;
    },

    async addcart(e) {
      let data = {};

      if (e == "watch") {
        data = {
          hireid: this.info.id,
          busid: this.businessinfo.id,
          soure: e,
          stoid: this.info.stoid,
        };
      } else {
        data = {
          hireid: this.info.id,
          busid: this.businessinfo.id,
          stoid: this.info.stoid,
          soure: e,
        };
      }

      let result = await this.$u.api.order.add(data);

      if (result.code) {
        if (this.addcartflag == true) {
          this.$refs.notice.show({
            type: "success",
            message: result.msg,
            duration: 1200,
            complete: () => {
              this.getbadge();
            },
          });
        } else {
          this.getbadge();
        }
      }
    },
    // 弹出层的立即够购买
    nowbuy() {
      this.show = false;
    },
    selectTab(index) {
      this.selectedTab = index;
    },
    open() {
      console.log("open");
    },
    close() {
      this.show = false;
      // console.log('close');
    },
    open1() {
      console.log("open");
    },
    close1() {
      this.show1 = false;
      // console.log('close');
    },
    // 商品详情图
    async proinfo() {
      let data = {
        hireid: this.proid,
        busid: this.businessinfo.id,
      };
      let result = await this.$u.api.product.proinfo(data);
      if (result.code) {
        this.info = result.data;
        this.soure = this.info.soure;
        if (this.info.thumbs_text) {
          this.list1 = this.info.thumbs_text;
        }
      } else {
        this.$refs.notice.show({
          type: "warning",
          message: result.msg,
          duration: 1800,
          complete: () => {
            //返回上一个界面
            uni.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.boxcar {
  width: 36px;
  position: relative;
}
.badge {
  position: absolute;
  right: 0px;
  top: 6px;
  z-index: 99999;
  width: 16px;
  height: 12px;
  border-radius: 100%;
  text-align: center;
}

.guige {
  width: 96%;
  .guigetitle {
    font-size: 13px;
    padding: 8px;
  }
  .list {
    width: 96%;

    display: flex;
    justify-content: space-around;
    .item {
      width: 65px;
      background: #ffedeb;
      height: 35px;
      border-radius: 5px;
      margin-left: 10px;
      line-height: 35px;
      text-align: center;
      color: #f5464b;
    }
  }
}
.num {
  display: flex;

  width: 96%;
  justify-content: space-between;
  align-items: center;
  margin: 30px auto;
  padding-left: 6px;

  .left {
    width: 48%;
  }
  .right {
    padding-left: 40px;
    width: 48%;
  }
}

.sumbbtn {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #eeeeee;

  .car {
    width: 42%;
  }
  .buy {
    width: 42%;
  }
}
// 商品信息区域的样式
.selected {
  border: 1px solid #f5464b;
}
.tanchu {
  width: 100%;

  .addgoodscard {
    width: 100%;

    .top {
      width: 100%;
      position: relative;

      border-bottom: 1px solid #eeeeee;

      .item {
        padding: 10px;
        align-items: center;
        display: flex;

        .thumb {
          position: absolute;
        }

        .stockandpeice {
          margin-left: 65px;

          .price {
            font-size: 16px;
            color: #c00000;
            font-weight: bold;
          }

          .stock {
            font-size: 13px;
            color: #989795;
            padding: 5px;
          }
        }
      }
    }
  }
}

.goods-info-box {
  position: relative;
  padding: 10px;
  padding-right: 0;

  .price {
    color: #c00000;
    font-size: 18px;

    margin: 10px 0;
  }

  .goods-info-body {
    display: flex;
    justify-content: space-between;

    .goods-name {
      font-size: 18px;
      padding-right: 10px;
    }

    // 收藏区域
    .favi {
      width: 60px;
      font-size: 12px;
      position: absolute;
      display: flex;
      right: 0px;
      top: 45px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: gray;
    }
  }

  // 运费
  .yf {
    margin: 10px 5px;
    font-size: 12px;
    color: gray;
  }
}

.sale {
  padding-top: 15px;
  color: #888888;
  margin-left: 10px;
}

.joinlevel {
  width: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  background: #f9f2d8;
  height: 50px;

  justify-content: space-between;

  .left {
    padding-left: 10px;
  }

  .right {
    padding-right: 10px;

    span {
      color: #888888;
    }
  }

  .left span {
    font-weight: bold;
    font-size: 16px;
    color: #c00000;
  }
}

.comment {
  height: 45px;
  width: 96%;
  margin: 0 auto;

  border: 1px solid #eeeeee;
  background: #ffffff;
  box-shadow: 0 0 5px rgba(224, 223, 223, 0.3);
  padding: 15px;
  font-size: 13px;

  border-radius: 10px;
}

.canshu {
  .box {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #eeeeee;
    line-height: 40px;
    .branktitle {
      padding: 15px;
      font-size: 13px;
      color: #989795;
    }
    .brankvalue {
      margin: 25px;
      font-size: 13px;
    }
  }
}
.params {
  width: 96%;
  margin: 15px auto;
  background: #ffffff;

  height: 120px;
  border: 1px solid #eeeeee;
  box-shadow: 0 0 5px rgba(224, 223, 223, 0.3);

  border-radius: 10px;
}

.content {
  background: #f7f7f7;

  .infothumb {
    text-align: center;
    /* 让内部元素居中显示 */
    margin-top: -10px;
  }

  .thumbitem {
    display: inline-block;
    /* 让每个thumbitem以块级元素的方式显示 */
    margin: 10px 10px;
    /* 可以根据实际情况设置间距 */
  }

  .proinfo {
    width: 100%;
    height: 60px;
    margin-top: 15px;
    line-height: 60px;
    font-size: 14px;
    background: #ffffff;
    text-align: center;
  }

  .info {
    padding: 13px;
    background: #ffffff;
    width: 96%;
    margin: 10px auto;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 5px rgba(224, 223, 223, 0.3);

    border-radius: 10px;
    font-size: 13px;

    .title {
      width: 320px;

      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    h3 {
      font-weight: bold;
      padding-top: 10px;
    }
  }
}

.submit {
  position: fixed;
  left: 0;
  width: 100%;

  bottom: 0px;

  .Box {
    width: 100%;

    display: flex;
    border: solid 2rpx #f2f2f2;
    justify-content: space-around;
    background-color: #ffffff;

    .left {
      display: flex;
      font-size: 20rpx;
      width: 45%;
      justify-content: space-around;

      .item {
        text-align: center;

        &.car {
          text-align: center;
          position: relative;
        }
      }
    }

    .right {
      display: flex;
      font-size: 28rpx;
      align-items: center;

      .btn {
        line-height: 66rpx;
        padding: 0 30rpx;
        border-radius: 36rpx;
        color: #ffffff;
      }

      .cart {
        background-color: #ed3f14;
        margin-right: 30rpx;
      }

      .buy {
        background-color: #ff7900;
      }
    }
  }
}
</style>
